<script>
const tableData = [
    {
        "date": "2020-09-01",
        "name": "Dcloud1",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-02",
        "name": "Dcloud2",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-03",
        "name": "Dcloud3",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-04",
        "name": "Dcloud4",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-05",
        "name": "Dcloud5",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-06",
        "name": "Dcloud6",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-07",
        "name": "Dcloud7",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-08",
        "name": "Dcloud8",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-09",
        "name": "Dcloud9",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-10",
        "name": "Dcloud10",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-11",
        "name": "Dcloud11",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-12",
        "name": "Dcloud12",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-13",
        "name": "Dcloud13",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-14",
        "name": "Dcloud14",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-15",
        "name": "Dcloud15",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-16",
        "name": "Dcloud16",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-01",
        "name": "Dcloud17",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-02",
        "name": "Dcloud18",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-03",
        "name": "Dcloud19",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-04",
        "name": "Dcloud20",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-05",
        "name": "Dcloud21",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-06",
        "name": "Dcloud22",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-07",
        "name": "Dcloud23",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-08",
        "name": "Dcloud24",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-09",
        "name": "Dcloud25",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-10",
        "name": "Dcloud26",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-11",
        "name": "Dcloud27",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-12",
        "name": "Dcloud28",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-13",
        "name": "Dcloud29",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-14",
        "name": "Dcloud30",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-15",
        "name": "Dcloud31",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-16",
        "name": "Dcloud32",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-01",
        "name": "Dcloud33",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-02",
        "name": "Dcloud34",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-03",
        "name": "Dcloud35",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-04",
        "name": "Dcloud36",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-05",
        "name": "Dcloud37",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-06",
        "name": "Dcloud38",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-07",
        "name": "Dcloud39",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-08",
        "name": "Dcloud40",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-09",
        "name": "Dcloud41",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-10",
        "name": "Dcloud42",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-11",
        "name": "Dcloud43",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-12",
        "name": "Dcloud44",
        "address": "上海市普陀区金沙江路 1516 弄"
    }, {
        "date": "2020-09-13",
        "name": "Dcloud45",
        "address": "上海市普陀区金沙江路 1518 弄"
    }, {
        "date": "2020-09-14",
        "name": "Dcloud46",
        "address": "上海市普陀区金沙江路 1517 弄"
    }, {
        "date": "2020-09-15",
        "name": "Dcloud47",
        "address": "上海市普陀区金沙江路 1519 弄"
    }, {
        "date": "2020-09-16",
        "name": "Dcloud48",
        "address": "上海市普陀区金沙江路 1516 弄"
    }]

export default {
    data() {
        return {
            searchVal: '',
            tableData: [],
            // 每页数据量
            pageSize: 10,
            // 当前页
            pageCurrent: 1,
            // 数据总量
            total: 0,
            loading: false
        }
    },
    onLoad() {
        this.selectedIndexs = []
        this.getData(1)
    },
    methods: {
        // 多选处理
        selectedItems() {
            return this.selectedIndexs.map(i => this.tableData[i])
        },
        // 多选
        selectionChange(e) {
            console.log(e.detail.index)
            this.selectedIndexs = e.detail.index
        },
        //批量删除
        delTable() {
            console.log(this.selectedItems())
        },
        // 分页触发
        change(e) {
            this.$refs.table.clearSelection()
            this.selectedIndexs.length = 0
            this.getData(e.current)
        },
        // 搜索
        search() {
            this.getData(1, this.searchVal)
        },
        // 获取数据
        getData(pageCurrent, value = '') {
            this.loading = true
            this.pageCurrent = pageCurrent
            this.request({
                pageSize: this.pageSize,
                pageCurrent: pageCurrent,
                value: value,
                success: res => {
                    // console.log('data', res);
                    this.tableData = res.data
                    this.total = res.total
                    this.loading = false
                }
            })
        },
        // 伪request请求
        request(options) {
            const { pageSize, pageCurrent, success, value } = options
            let total = tableData.length
            let data = tableData.filter((item, index) => {
                const idx = index - (pageCurrent - 1) * pageSize
                return idx < pageSize && idx >= 0
            })
            if (value) {
                data = []
                tableData.forEach(item => {
                    if (item.name.indexOf(value) !== -1) {
                        data.push(item)
                    }
                })
                total = data.length
            }

            setTimeout(() => {
                typeof success === 'function' &&
                success({
                    data: data,
                    total: total
                })
            }, 500)
        },
        gotoForm() {
            uni.navigateTo({
                url: "/pages/Demo02",
            });
        },
    }
}
</script>

<template>
    <view>
        <view class="uni-container">
            <uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
                <uni-tr>
                    <uni-th width="150" align="center">日期</uni-th>
                    <uni-th width="150" align="center">姓名</uni-th>
                    <uni-th align="center">地址</uni-th>
                    <uni-th width="204" align="center">设置</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td>{{ item.date }}</uni-td>
                    <uni-td>
                        <view class="name">{{ item.name }}</view>
                    </uni-td>
                    <uni-td align="center">{{ item.address }}</uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <button class="uni-button" size="mini" type="primary" @click="gotoForm()">修改</button>
                            <button class="uni-button" size="mini" type="warn">删除</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change"/>
            </view>
        </view>
    </view>
</template>

<style>
/* #ifndef H5 */
/* page {
	padding-top: 85px;
} */
/* #endif */
.uni-group {
    display: flex;
    align-items: center;
}
</style>
